<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初级乘法</title>
    <style>
        body
			{
				background-attachment: fixed;	
				background-position: center;		
				background-image: url(背景图3.jpg);
				background-repeat: no-repeat;		
				background-size: cover;			
			}
        .bigbox {
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: #ccc;
            border: 1px solid #000;
            border-radius: 10px;
            text-align: center;
            font-size: 20px;
        }
        #input {
            width: 100px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>中级乘法</h1>
<div class="bigbox">
    <p id="tishu">当前题号: 1</p>
    <div id="box3">当前得分：<span id="score">0</span></div>
   <h3> <div id="shu1" class="box1"></div>
    <div class="box2"><pre>两数相乘   *</pre></div>
    <div id="shu2" class="box1"></div></h3>
    <div class="box2">你的答案：
        <input type="text" id="input" placeholder="请输入答案">
        <button onclick="zqdaan()" id="submitBtn">确定</button>
    </div>
    <div id="jg" class="box1"></div>
    <button id="xyt">下一题</button>
</div>
    <script>
        let score = 0;
        function sjs() {
            let min = 10;
            let max = 100;
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        let c = sjs();
        let d = sjs();
        document.getElementById('shu1').innerText = '第一个数： ' + c;
        document.getElementById('shu2').innerText = '第二个数： ' + d;

        function zqdaan() {
            let srjg = parseInt(document.getElementById('input').value, 10);
            let zqjg = c * d;
            document.getElementById('jg').innerText = '结果: ' + (srjg === zqjg ? '非常棒！答对了' : '继续加油，正确答案是 ' + zqjg);
            if(srjg === zqjg)
        {
            score ++;
            document.getElementById('score').innerText = score;
        }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const xyt = document.getElementById('xyt');
            xyt.addEventListener('click', function() {
                c = sjs();
                d = sjs();
                document.getElementById('shu1').innerText = '第一个数： ' + c;
                document.getElementById('shu2').innerText = '第二个数： ' + d;
                document.getElementById('input').value = ''; 
                document.getElementById('jg').innerText = ''; 
            });
        });
         // 获取按钮和显示点击次数的元素
         const button = document.getElementById('xyt');
        const countDisplay = document.getElementById('tishu');

        // 初始化点击次数为0
        let tishu = 1;

        // 添加点击事件监听器到按钮
        button.addEventListener('click', () => {
            // 每次点击时增加点击次数
            tishu++;

            // 更新显示点击次数的元素的内容
            countDisplay.textContent = `当前题号: ${tishu}`;
        });
    </script>
</body>
</html>